<template>
    <div class="edu-page-warp">
        <div class="edu-page-title mg-top">
            {{$t('timeSchedule.list')}}
        </div>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-opertion-bar">
                <div class="float-left">
                  <el-form :model="queryParams" :inline="true" ref="queryParams" class="bg-white">
                      <el-form-item :label="$t('timeSchedule.isWeekDay')">
                          <el-select v-model="queryParams.isWeekend">
                              <el-option v-for="item in options.isWeeks"
                                  :key="item.id"
                                  :label="item.typeName"
                                  :value="item.id">
                              </el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item class="float-right">
                          <el-button @click="reset">{{$t('message.reset')}}</el-button>
                          <el-button type="primary" @click="getTimeSchedule">{{$t('message.filter')}}</el-button>   
                      </el-form-item>
                    </el-form>
                </div>
                <div class="float-right">
                    <el-button @click="addCalendar" type="primary">{{$t('message.add')}}</el-button>
                    <el-button @click="deleteCalendar(null)" type="danger">{{$t('message.delete')}}</el-button>
                </div> 
            </div>
            <el-table :data="workflows.list" size="mini" @selection-change="handleSelectionChange" tooltip-effect="light" stripe>
                <el-table-column type="selection" width="30"></el-table-column>
                <el-table-column type="index" width="55" :label="$t('message.order')" align="center"></el-table-column>
                <el-table-column show-overflow-tooltip :label="$t('message.name')">
                    <template slot-scope="scope">{{getClassNodeName(scope.row.classNode)}}</template>
                </el-table-column>
                <el-table-column :label="$t('message.startTime')">
                    <template slot-scope="scope">{{scope.row.beginTime}}</template>
                </el-table-column>
                <el-table-column :label="$t('message.endTime')">
                    <template slot-scope="scope">{{scope.row.endTime}}</template>
                </el-table-column>
                <el-table-column :label="$t('timeSchedule.isWeekDay')">
                    <template slot-scope="scope">
                      <span v-if="scope.row.isWeekend==0">{{$t('message.no')}}</span>
                      <span v-if="scope.row.isWeekend==1">{{$t('message.yes')}}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip :label="$t('message.remark')">
                    <template slot-scope="scope">
                      <span :title="scope.row.remark">{{scope.row.remark}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('message.operating')">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editlCalendar(scope.row)" size="mini">{{$t('message.edit')}}</el-button>
                        <el-button type="text" @click="deleteCalendar([scope.row.id])" size="mini">{{$t('message.delete')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        @size-change="onPageSizeChange"
                        @current-change="onCurrentPageChange"
                        :current-page="queryParams.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryParams.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="workflows.total_" style="float: right;margin:10px 60px 0 0;">
                    </el-pagination>
                </div>
            </div>
        </el-card>
        <el-dialog :title="dialogTitle" width="42%" :visible.sync="showDeptsDialog" @close="resetAddForm">
          <el-form :model="createForm" ref="createForm" label-width="85px" :rules="rules" class="createForm">
            <el-row>
              <el-col :span="11">
                <el-form-item prop="classNode" :label="$t('timeSchedule.classNode')" required>
                  <el-select v-model="createForm.classNode" style="width:100%;">
                      <el-option v-for="item in options.classNodes"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="beginTime" :label="$t('message.startTime')" required style="width:100%;">
                  <el-time-select  
                    v-model="createForm.beginTime" 
                    :editable="false"
                    :picker-options="{
                      start: '05:00',
                      step: '00:05',
                      end: '23:59'
                    }"
                    :clearable="false"
                    @blur="beginTimeChange"
                    ></el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="endTime" :label="$t('message.endTime')" required style="width:100%;">
                  <el-time-select 
                    :editable="false"
                    :picker-options="{
                      start: '05:00',
                      step: '00:05',
                      end: '23:59',
                      minTime: createForm.beginTime
                    }"
                    :clearable="false"
                    :value="createForm.endTime"
                    v-model="createForm.endTime" ></el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="11" style="height:51px;">
                <el-form-item :label="$t('timeSchedule.isWeekDay')" required>
                  <el-radio-group v-model="createForm.isWeekend">
                    <el-radio label="1">{{$t('message.yes')}}</el-radio>
                    <el-radio label="0">{{$t('message.no')}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item :label="$t('message.remark')" prop="remark">
                  <el-input v-model="createForm.remark" maxlength="255"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item :label="$t('message.remarkEn')" prop="remarkEn">
                  <el-input v-model="createForm.remarkEn" maxlength="255"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form> 
          <span slot="footer" class="dialog-footer">
            <el-button @click="showDeptsDialog = false">{{$t('message.cancel')}}</el-button>
            <el-button type="primary" @click="submitForm">{{$t('message.submit')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
import TimeScheduleApi from "common/src/api/timeSchedule";
import { queryDic } from "common/src/api/dictionary";
/**
 * 作息时间表
 */
export default {
  name: "TimeSchedule",
  data() {
    return {
      showDeptsDialog: false,
      options: {
        isWeeks: [
          { typeName: this.$t('message.all'), id: "" },
          { typeName: this.$t('message.yes'), id: "1" },
          { typeName: this.$t('message.no'), id: "0" }
        ],
        classNodes: []
      },
      queryParams: {
        isWeekend: "",
        pageNum_: 1,
        pageSize_: 20
      },
      isEdit: false,
      workflows: [],
      selectionDatas: [],
      createForm: {
        classNode: "",
        enName: "",
        remark: "",
        remarkEn: "",
        beginTime: "",
        endTime: "",
        isWeekend: "1"
      },
      rules: {
        classNode: [
          { required: true, message: this.$t('message.inputRequired'), trigger: "change" }
        ],
        beginTime: [
          { required: true, message: this.$t('message.inputRequired'), trigger: "change" }
        ],
        endTime: [{ required: true, message: this.$t('message.inputRequired'), trigger: "change" }],
        isWeekend: [{ required: true, message: this.$t('message.inputRequired'), trigger: "change" }]
      }
    };
  },
  created() {
  },
  mounted() {
    this.getOptions();
  },
  activated() {
  },
  methods: {
    getOptions() {
      let data = {
          lang: this.$store.getters.language || "cn",
          type: "allChild",
          keys: ["X_KS"]
        };
        queryDic(data).then(res => {
            if (res.code == 200) {
              let data = res.data['X_KS'];
              for (let key in data) {
                this.options.classNodes.push({
                  value: key,
                  label: data[key]
                });
              }
            }
            this.getTimeSchedule();
        });
    },
    getClassNodeName(value) {
      let arrays = this.options.classNodes;
      for (let index = 0; index < arrays.length; index++) {
        const element = arrays[index];
        if (value == element.value) return element.label;
      }
      return value;
    },
    handleSelectionChange(val) {
      this.selectionDatas = val;
    },
    deleteCalendar(ids) {
      if (ids == null) {
        ids = [];
        for (const data of this.selectionDatas) {
          ids.push(data.id);
        }
      }
      if (ids.length < 1) {
        this.$alert(this.$t('common.pla.plsSelectRecord'), this.$t('message.prompt'), { type: "warning" });
        return;
      }
      this.$confirm(this.$t('timeSchedule.deleteConfirm'), this.$t('message.confirm'), {
        distinguishCancelAndClose: false,
        confirmButtonText: this.$t('message.confirm'),
        cancelButtonText: this.$t('message.cancel')
      }).then(() => {
        TimeScheduleApi.deleteTimeSchedule(ids).then(response => {
          if (response.code == 200) {
            this.$message({
              type: "success",
              message: this.$t('message.deleteSuccess')
            });

            this.getTimeSchedule();
          } else {
            this.$message({
              type: "info",
              message: response.msg
            });
          }
        });
      });
    },
    getTimeSchedule() {
      TimeScheduleApi.searchTimeScheduleList(this.queryParams).then(
        response => {
          if (response.code === 200) {
            this.workflows = response.data;
          } else {
            throw response.msg;
          }
        }
      );
    },
    onPageSizeChange(size) {
      this.queryParams.pageSize_ = size;
      this.getTimeSchedule();
    },
    onCurrentPageChange(currentPage) {
      this.queryParams.pageNum_ = currentPage;
      this.getTimeSchedule();
    },
    reset() {
      this.queryParams.isWeekend = "";
      this.queryParams.pageNum_ = 1;
      this.queryParams.pageSize_ = 20;
      this.getTimeSchedule();
    },
    beginTimeChange(timer) {
      let time = this.createForm.beginTime;
      if (time) {
        this.createForm.endTime = moment("2018-10-01 " + time)
          .add(45, "minutes")
          .format("HH:mm");
      }
    },
    editlCalendar(data) {
      TimeScheduleApi.getTimeSchedule(data.id).then(rsp => {
        this.isEdit = true;
        this.createForm = rsp.data;
        this.createForm.isWeekend += "";
        this.dialogTitle = this.$t('message.edit');
        this.showDeptsDialog = true;
      });
    },
    addCalendar() {
      this.isEdit = false;
      this.dialogTitle = this.$t('message.add');
      this.showDeptsDialog = true;
    },
    resetAddForm() {
      // 使用resetField方法会导致时间联动失效
      this.$refs.createForm.clearValidate();
      for (const key in this.createForm) {
        this.createForm[key] = "";
      }
      this.createForm.isWeekend = "1";
    },
    submitForm() {
      this.$refs.createForm.validate(valid => {
        if (valid) {
          let _promise = null;
          let message = this.$t('message.addSuccess');
          if (this.isEdit) {
            message = this.$t('message.editSuccess');
            _promise = TimeScheduleApi.updateTimeSchedule(this.createForm);
          } else {
            _promise = TimeScheduleApi.addTimeSchedule(this.createForm);
          }
          _promise.then(response => {
            if (response.code == 200) {
              this.$message({
                type: "success",
                message: message
              });
              this.showDeptsDialog = false;
              this.getTimeSchedule();
            } else {
              this.$message({
                type: "info",
                message: response.msg
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.createForm {
  .line {
    text-align: center;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
</style>
